<template>
  <div>
       <div class="layout-content">
            <Row>
                <Col span="5">
                    <Menu active-name="1-2" width="115px" :open-names="['1']">
                        <Tree :data="baseData" @on-select-change="getNodeId"></Tree>
                    </Menu>
                </Col>
                <Col span="19">
                    <div class="layout-content-main">
                        <Button type="primary" @click="addData">添加新闻</Button>
                        <Button type="error" @click="delAll">删除选中</Button>
                        <Input v-model="valuein" placeholder="请输入要搜索的新闻标题" style="width: 300px"></Input>
                        <Button type="primary" shape="circle" icon="ios-search" @click="search">搜索</Button>
                        <Button type="primary" shape="circle" @click="recovery">还原</Button>
                        <scroll height="600">
                            <Table border :columns="columns7" @on-selection-change="selected" :data="list"></Table>
                        </scroll>
                        <Page :total="filter.total" show-total size="small" show-elevator show-sizer @on-page-size-change="pageSizeChange" :page-size-opts='set'  @on-change='changePage' :current='this.filter.current'  :page-size='size' placement="top" ></Page>

                        <Modal v-model="modal1" title="新闻管理" @on-ok="ok()" @on-cancel="cancel()" :styles="{top:'65px'}">
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="60" >
                                <FormItem label="标题" prop="title">
                                    <Input v-model="formValidate.title" placeholder="请输入新闻标题"></Input>
                                </FormItem>
                                <FormItem label="作者" prop="author">
                                    <Input v-model="formValidate.author" placeholder="请署名"></Input>
                                </FormItem>
                                <FormItem label="副标题" prop="btitle">
                                    <Input v-model="formValidate.btitle" placeholder="请输入副标题"></Input>
                                </FormItem>
                                <FormItem label="内容" prop="content" >

                                        <!-- quill-editor -->
                                        <editor ref="myTextEditor" v-model="formValidate.content"     >
                                        </editor>
                                    
                                </FormItem>
                            </Form>
                        </Modal>
                    </div>
                </Col>
            </Row>
        </div>
  </div>
</template>

<script>
import Base from '../common/Base.js';
import { quillEditor } from 'vue-quill-editor';

export default {
    mixins:[Base],
    components: {
        editor:quillEditor
    },
    data(){
        return{
            columns7: [
                    {
                        type:'selection',
                        width:60,
                        align:'center'
                    },
                    {
                        title: '标题',
                        key: 'title',
                    },
                     {
                        title: '作者',
                        key: 'author',
                        width:'100px'
                     },
                     {
                        title: '副标题',
                        key: 'btitle',
                     },
                     {
                        title: '评论数',
                        key: 'commentCount',
                        width:'80px'
                     },
                     {
                        title: '时间',
                        key: 'date',
                     },
                     
                    {
                        title: '操作',
                        key: 'action',
                        width: 130,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params);
                                            this.modal1=true;
                                            this.itid=params.row._id;
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params.row._id);
                                            this.$Message.success('删除成功!');
                                            this.changePage();
                                            this.getData();
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
            itid:'',
            baseData:[],
            cateId:null,
            module:'news',
            formValidate:{
                title: '',
                author: '',
                btitle: '',
                content: '',
                cateId:null
            },
            
            ruleValidate: {
                title: [
                    { required: true, message: '标题不能为空', trigger: 'blur' }
                ],
                author: [
                    { required: true, message: '请署名~~', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '内容不能为空', trigger: 'blur' },
                ]
            }
        }
    },
    created(){
        this.getTree();
        this.getData();
    },
    
    methods:{
        getTree(type){
            this.$http({
                url:'http://localhost:3000/cate/list/1',
                method:'get'
            }).then(res=>{
                this.baseData = res.data;
            })
        },
        getNodeId(nodeInfo){
            try{
                if(!nodeInfo[0].children){
                    this.id=nodeInfo[0]._id;
                    this.formValidate.cateId=nodeInfo[0]._id;
                    this.getData();
                }else{
                    this.$Message.info('请点击子分类获取信息!');
                }
            }catch(e){
                this.$Message.info('再点击一次节点!');
            }
        },
        initData(){
             this.$http({
                url:'http://localhost:3000/news/list',
                method:'post'
            }).then(res=>{
                this.list = res.data;
            })
        },
        cleanInput(){
            this.formValidate.title='';
            this.formValidate.author='';
            this.formValidate.btitle='';
            this.formValidate.content='';
        },
        getInput(response){
            this.formValidate.title=response.data.title;
            this.formValidate.author=response.data.author;
            this.formValidate.btitle=response.data.btitle;
            this.formValidate.content=response.data.content;
        },
    }


}
</script>

<style scoped>
    .ivu-col-span-5{
        width:14%;
    };
</style>
